<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>

<style>
    * {
        margin: 0;
        padding: 0;
        list-style: none;
        font-family: Helvetica Neue, Helvetica, Arial, Microsoft Yahei, Hiragino Sans GB, Heiti SC, WenQuanYi Micro Hei, sans-serif;
        text-align: center;
    }

    .box {
        width: 1226px;
        height: 614px;
        background-color: rgb(245, 245, 245);
        margin: 100px auto;
    }

    .left {
        float: left;
        width: 234px;
        height: 614px;
    }

    .right {
        float: left;
        width: 992px;
        height: 614px;
        background-color: rgb(244, 244, 244);
    }

    .box .right li {
        float: left;
        width: 234px;
        height: 300px;
        background-color: rgb(255, 255, 255);
        margin-left: 14px;
        margin-bottom: 14px;
    }

    .box .left a {
        display: inline-block;
        width: 234px;
        height: 614px;
        background-image: url(./../resources/left.jpg);
    }

    .box .right li {
        text-align: center;
    }

    .box .right li h3 {
        margin-bottom: 4px;
        color: #333333;
        font-size: 14px;
        font-weight: 400;
    }

    .box .right li p {
        margin: 0 10px 10px;
        height: 18px;
        color: #B0B0B0;
        font-size: 12px;
        font-weight: 11;
        overflow: hidden; /* 隐藏超出部分 */
        text-overflow: ellipsis; /* 超出部分用省略号表示 */
        white-space: nowrap; /* 防止换行 */
    }

    .box .right li .price {
        margin-top: 5px;
        color: #ff6700;
        font-weight: 400;
    }

    del {
        color: #B0B0B0;
    }
</style>


<body>
<div class="box">
    <div class="left">
        <a href="#" title="点击跳转商品详情"></a>
    </div>
    <ul class="right">
        <li>
            <img src="./../resources/1.webp" alt="">
            <h3>Redmi K70 至尊版</h3>
            <p>性能魔王 全面进化</p>
            <p class="price">
                <span>2599元起</span>
                <span>元起</span>
            </p>
        </li>
        <li>
            <img src="./../resources/2.webp" alt="">
            <h3>Xiaomi MIX Flip</h3>
            <p>4.01英寸多功能超大外屏|徕卡光学Summilux镜头</p>
            <p class="price">
                <span>2599元起</span>
                <span>元起</span>
            </p>
        </li>
        <li>
            <img src="./../resources/3.webp" alt="">
            <h3>
                Xiaomi MIX Fold 4
            </h3>
            <p>超轻薄四曲面机身|小米龙骨转轴2.0|全碳纤维支撑架构</p>
            <p class="price">
                <span>8999</span>
                <span>元起</span>
            </p>
        </li>
        <li>
            <img src="./../resources/4.webp" alt="">
            <h3>
                Redmi Turbo 3
            </h3>
            <p>性能旋风，席卷而来</p>
            <p class="price">
                <span>2599元起</span>
                <span>元起</span>
            </p>
        </li>
        <li>
            <img src="./../resources/5.webp" alt="">
            <h3>Redmi K70 至尊版</h3>
            <p>性能魔王 全面进化</p>
            <p class="price">
                <span>2599元起</span>
                <span>元起</span>
            </p>
        </li>
        <li>
            <img src="./../resources/6.webp" alt="">
            <h3>
                Redmi K70 Pro
            </h3>
            <p>第三代骁龙8 年度旗舰平台</p>
            <p class="price">
                <span>2799</span>
                <span>元起</span>
            </p>
        </li>
        <li>
            <img src="./../resources/7.webp" alt="">
            <h3>Redmi K70 Pro</h3>
            <p>第三代骁龙8 年度旗舰平台</p>
            <p class="price">
                <span>2799</span>
                <span>元起</span>
                <del>
                    <span>2999</span>
                    元
                </del>
            </p>
        </li>
        <li>
            <img src="./../resources/8.webp" alt="">
            <h3>
                Redmi K70
            </h3>
            <p>第二代骁龙8 旗舰芯</p>
            <p class="price">
                <span>2299</span>
                <span>元起</span>
            </p>
        </li>
    </ul>
</div>
</body>
</html>